<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useECharts } from "@pureadmin/utils";
import { chartInfo } from "../interface";

const props = withDefaults(defineProps<chartInfo>(), {
  xAxisData: () => [
    "0",
    "100",
    "200",
    "300",
    "400",
    "500",
    "600",
    "700",
    "800"
  ],
  seriesData: () => [0.11, 0.12, 0.13, 0.22, 0.33, 0.5, 0.73, 0.81, 0.99],
  xAxisName: "Train Rounds",
  yAxisName: "Test Percision"
});

const chartRef = ref<any>();

const { setOptions, resize } = useECharts(chartRef, {});

setOptions({
  tooltip: {
    show: true
  },
  textStyle: {
    color: "#A8ABB2"
  },
  grid: {
    bottom: "15%",
    top: "15%",
    right: "13%"
    // containLabel: true
  },
  xAxis: {
    name: props.xAxisName,
    type: "category",
    boundaryGap: true,

    axisTick: {
      // 轴刻度
      show: false
    },
    axisLabel: {
      margin: 15 // 调整刻度标签和坐标轴名称之间的间距
    },
    data: props.xAxisData,
    nameTextStyle: {
      color: "#303133",
      fontSize: 14,
      padding: [8, 0, 0, -10],
      verticalAlign: "top"
    }
  },
  yAxis: {
    name: props.yAxisName,
    type: "value",
    nameTextStyle: {
      color: "#303133",
      fontSize: 14
    },
    splitLine: {
      //网格线
      lineStyle: {
        type: "dashed" //设置网格线类型 dotted：虚线   solid:实线
      },
      show: true //隐藏或显示
    }
  },
  series: [
    {
      data: props.seriesData,
      smooth: true,
      type: "line"
    }
  ]
});
</script>

<template>
  <div ref="chartRef" style="width: 90%; height: 25vh"></div>
</template>
